<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>

	<body>
		<div id="app">
			<cpn></cpn>
			<cpn></cpn>
			<!-- 组件加上ref="aa"属性 -->
			<cpn ref="aa"></cpn>
			<button @click="btnClick">按钮</button>
		</div>
		<template id="cpn">
			<div>我是子组件</div>
		</template>
		<script src="../lib/vue.js"></script>
		<script>
			let vm = new Vue({
				el: "#app",
				data: { message: "hello" },
				methods: {
					btnClick() {
						//1.$children,拿到所有子组件对象，单独取要用下标，不方便
						// console.log(this.$children);
						// this.$children[2].show();
						// console.log(this.$children[2].name);
						//2.$refs,默认是一个空对象，当给组件加上ref="aa"属性，对象就有一个aa属性的子组件
						console.log(this.$refs);
						this.$refs.aa.show();
						console.log(this.$refs.aa.name);
					}
				},
				components: {
					cpn: {
						template: "#cpn",
						data() {
							return {
								name: "我是子组件的name"
							};
						},
						methods: {
							show() {
								console.log("aaa");
							}
						}
					}
				}
			});
		</script>
	</body>
</html>
